@import "mixin";

.header {
  position: fixed;
  top: 0;
  padding: 0 rem(16px);
  width: 100%;
  height: rem(43px);
  background-color: #f9f9f9;
  z-index: 10;
  @include border-bottom-1px(#e5e5e5);
  >.left {
    float: left;
    height: 100%;
    >span {
      font-size: rem(12px);
      color: #666666;
    }
  }
  >.right {
    float: right;
    height: 100%;
    >span {
      display: inline-block;
      font-size: rem(12px);
      color: #666666;
      >.icon-dropmenu {
        display: inline-block;
        vertical-align: middle;
        width: rem(14px);
        height: rem(3px);
        @include bg-image('../images/icon-dropmenu');
      }
    }
  }
}

.content {
  >.list-wrapper {
    >.list-item {
      padding: 0 rem(16px);
      width: 100%;
      height: rem(60px);
      line-height: rem(60px);
      background-color: #fff;
      @include border-bottom-1px(#e5e5e5);
      >a {
        display: block;
        width: 100%;
        height: 100%;
        >.left {
          float: left;
          display: inline-block;
          padding-top: rem(6px);
          >p {
            line-height: rem(24px);
            font-size: rem(13px);
            color: #999999;
            &:first-child {
              line-height: rem(24px);
              font-size: rem(16px);
              color: #333333;
            }
          }
        }
        >.right {
          float: right;
          display: inline-block;
          height: 100%;
          font-size: 0;
          >.item-money {
            display: inline-block;
            vertical-align: top;
            font-size: rem(16px);
            color: #333333;
          }
          >.arrow-wrapper {
            display: inline-block;
            vertical-align: top;
            height: 100%;
            >.arrow-right {
              display: inline-block;
              margin: 0 0 0 rem(6px);
              vertical-align: middle;
              width: rem(8px);
              height: rem(12.5px);
              @include bg-image('../images/arrow-right');
              background-repeat: no-repeat;
              -webkit-background-size: 100% 100%;
              background-size: 100% 100%;
            }
          }
        }
      }
    }
  }
}

.mask {
  display: none;
  position: fixed;
  top: 0;
  bottom: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.6);
  z-index: 15;
  >.dropmenu {
    position: absolute;
    top: rem(40px);
    right: rem(12px);
    background-color: #fff;
    z-index: 20;
    border-radius: rem(4px);
    >.drop-item {
      width: rem(110px);
      height: rem(44px);
      line-height: rem(44px);
      text-align: center;
      @include border-bottom-1px(#e5e5e5);
      font-size: rem(12px);
      color: #333333;
      &:last-child {
        &:after {
          display: none;
        }
      }
    }
    &:before {
      content: '';
      position: absolute;
      top: rem(-6px);
      right: rem(6px);
      display: inline-block;
      border-bottom: rem(6px) solid #fff;
      border-left: rem(6px) solid transparent;
      border-right: rem(6px) solid transparent;
    }
  }
}